<template>
	<view class="main"> 
		<navbar :title="$t('financial.details')" background="#FF8E20" titleColor="#FFFFFF" backColor="#FFFFFF">
		</navbar>
		<view class="top">
			<view class="msg">
				<swiper class="toast-swiper" :autoplay="true" :interval="5000" :vertical="true" :circular="true">
					<swiper-item v-for="(item,index) in broadcastList" :key="index">
						<view class="toast-swiper-item">
							<view class="toast-swiper-item-main">
								<text>{{item}}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="name">
				<view class="name-font">
					[NO:{{info.name}}]{{info.finance_name}}
				</view>
				<view class="middle">
					<view class="box">
						<view class="rate" style="color: #F14034;font-size: 40rpx;line-height: 32rpx;">
							{{info.rate}}%
						</view>
						<view class="box-bottom">
							{{$t("financial.rate")}}
						</view>
					</view>
					<view class="box">
						<view class="due">
							{{info.day}} days
						</view>
						<view class="box-bottom">
							{{$t("financial.due")}}
						</view>
					</view>
					<view class="box">
						<view class="buy">
							{{info.buyers}} 
						</view>
						<view class="box-bottom">
							{{$t("financial.buy")}}
						</view>
					</view>
					<view class="box">
						<view class="price">
							{{ $currency + info.price}}
						</view>
						<view class="box-bottom">
							{{$t("financial.price")}}
						</view>
					</view>
				</view>
				<view class="line-box" v-if="condition == 4">
					<view class="u-flex u-row-between" v-if="info.ratelist&& info.ratelist.length">
						<view class="align-center-vertical" style="height: 120rpx;">
							<view>
								{{$t("financial.yie")}}
							</view>
							<view>
								{{$t("financial.buy")}}
							</view>
						</view>
						<view class="shape-grey">
							<view class="shape-green" :style="{width: info.ratePercent*445 - 22 + 'rpx'}">
								
							</view>
							<view class="align-center-vertical" style="width: 22rpx;z-index:1;" v-for="i in info.ratelist">
								<view>
									{{i.rate}}%
								</view>
								<view :class="Number(i.rate) <=Number(info.rate) ? 'cirle1' : 'cirle'">
									
								</view>
								<view>
									{{i.start}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="add" v-if="condition ==4" >
					<view class="yuan1">
						
					</view>
					<view class="" style="flex:1;margin-top: -8rpx;margin-left: 12rpx;" v-if="info.rate == info.ratelist[info.ratelist.length - 1].rate">
						<text class="add-font">{{$t("financial.reach")}}</text>
					</view>
					<view class="" style="flex:1;margin-top: -8rpx;margin-left: 12rpx;" v-else>
						<text class="add-font">{{$t("financial.add")}}</text>
						<text style="color: #F14034;margin-left: 10rpx;margin-right: 4rpx;">{{info.adding}}</text>
						<text>{{$t("financial.more")}}</text>
						<text style="color: #F14034;margin-left: 4rpx;margin-right: 10rpx;">{{info.yield_by_rate}}%</text>
					</view>
				</view>
				<view class="invite" @click="navTo('/pages/team/invite')">
					{{$t("financial.invite")}}
				</view>
				<view class="">
					<view class="box1">
						<view class="month">
							<view class="time">
								{{info.presell_end_time | monthFormat}}
							</view>
							<view class="time">
								{{info.start_time | monthFormat}}
							</view>
							<view class="time">
								{{info.end_time | monthFormat}}
							</view>
							<view class="time">
								{{info.end_days | monthFormat}}
							</view>
						</view>
						<view class="shape">
								<view :class="list[0] ? 'cirle1' : 'cirle'">
									
								</view>
								<view :class="list[0] ? 'shape-line1' : 'shape-line'">
									
								</view>
								<view :class="list[0] ? 'cirle1' : 'cirle'">
									
								</view>
								<view :class="list[0] ? 'shape-line1' : 'shape-line'">
									
								</view>
								<view :class="list[0] ? 'cirle1' : 'cirle'">
									
								</view>
								<view :class="list[0] ? 'shape-line1' : 'shape-line'">
									
								</view>
								<view :class="list[0] ? 'cirle1' : 'cirle'">
									
								</view>
						</view>
						<view class="month-details">
							<view class=""  style="width: 140rpx;">
								{{$t("success.ends")}}
							</view>
							<view class="" style="width: 140rpx;">
								{{$t("success.interest")}}
							</view>
							<view class="" style="width: 140rpx;">
								{{$t("success.earn")}}
							</view>
							<view class="" style="width: 140rpx;">
								{{$t("financial.receive")}}
							</view>
						</view>
					</view>
				</view>
				<view class="return" v-if="condition == 4">
					<view class="yuan">
						
					</view>
					<view class="return-font">
						{{$t("financial.at")}} 
					</view>
				</view>
				<view class="date" v-if="condition == 4">
					{{$t("financial.date")}} {{info.end_time | timeFormat}}
				</view>
				<view class="" v-if="condition == 2">
					
					<view class="ended">
						{{$t("financial.ended")}}
					</view>
				</view>
				<!-- <view class="" v-if="condition == 3">
					<view class="invite1">
						{{$t("financial.invite")}}
					</view>
					<view class="ended">
						{{$t("financial.ended")}}
					</view>
				</view> -->
			</view>
		</view>
		<view class="" style="background-color:#F6F6F6;overflow: hidden;">
			<view class="buyer">
				<view class="buyer-top">
					<view class="buyer-photo">
						<image src="@/static/image/money/line2.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
					</view>
					<view class="buyer-list">
						{{$t("financial.list")}}
					</view>
					<view class="buyer-all" style="margin-left: 388rpx;margin-right: 14rpx;margin-top: 4rpx;" @click="showview(info.buyers_list)">
						{{$t("financial.all")}}
					</view>
					<image src="../../static/image/goods/next_grey.png" mode="" @click="showview(info.buyers_list)" style="width: 13rpx;height: 23rpx;"></image>
				</view>
				<template v-if="info.buyers_list && info.buyers_list.length > 0">
					<view class="list-details" v-for="(item,index) in info.buyers_list" :key="item.user_id" >
						<view class="list-user" v-show="index<3">
							<image :src="item.avatar" mode="" width="70rpx" height="70rpx" shape="circle"
							style="width:70rpx;height:70rpx;margin: 40rpx 22rpx 0rpx 25rpx;border-radius:50%;"></image>
							<view class="list-name" >
								{{item.nickname}}
							</view>
							<view class="list-name" >
								{{$currency + item.money}}
							</view>
							<view class="list-time" >
								{{item.createtime}}
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="rules">
				<view class="rules-top">
					<image src="@/static/image/money/line2.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
					<view class="" style="margin-left: 12rpx;">
						{{$t("financial.rules")}}
					</view>
				</view>
				<view class="table-bg" v-if="info.ratelist && info.ratelist.length > 0">
					<table class="">
						<tr><td class="table-title">{{$t("financial.buy")}}</td><td class="table-title">{{$t("financial.yie")}}</td></tr>
						<tr v-for="item in info.ratelist" :key="item.id + item.start"><td class="left" >{{item.start == '0'?('<' + item.end):(item.end == '0'?('>'+item.start):(item.start + ' - ' + item.end))}}</td><td class="right">{{item.rate}}%</td></tr>
					</table>
				</view>
			</view>
			<view class="product">
				<view class="product-detail">
					<image src="@/static/image/money/line2.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
					<view class="" style="margin-left: 12rpx;">
						{{$t("financial.product")}}
					</view>
				</view>
				<view class="product-type">
					<view class="agree" @click="navTo('/pages/home/rule', {type: 'protocol'})">
						<image src="@/static/image/money/user2.png" mode="" style="width: 54rpx;height: 62rpx;"></image>
						<view class="">
							{{$t("financial.agree")}}
						</view>
					</view>
					<view class="customer" style="text-align: center;" @click="navTo('/pages/home/rule', {type: 'privilege'})">
						<image src="@/static/image/money/user1.png" mode="" style="width: 54rpx;height: 62rpx;"></image>
						<view class="">
							{{$t("financial.customer")}}
						</view>
					</view>
				</view>
			</view>
			<view class="faq">
					<view class="faq-top">
						<view class="">
							<image src="@/static/image/money/line2.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
						</view>
						<view class="" style="margin-left: 12rpx;">
							{{$t("financial.faq")}}
						</view>
					</view>
				<view v-for="item in faq" :key="item.title">
					<view class="question" @click="item.show= !item.show">
						{{item.title}}
						<image src="@/static/image/money/bottom.png" mode=""  style="margin-left: 108rpx;width:22rpx ;height:12rpx"  v-if="item.show == false"></image>
						<image src="@/static/image/money/top.png" mode=""  style="margin-left: 108rpx;width:22rpx ;height:12rpx"  v-else></image>
					</view>
					<view class="answer" v-html="item.content" v-show="item.show == true">
						
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="four" >
				{{$t("financial.four",{num: info.user_max_buy})}}
			</view>
			<view class="position" v-if="condition == 4" @click="purchaseshow = true">
				{{$t("financial.purchase")}}
			</view>
			<view class="positions" v-if="condition == 2" >
				{{$t("financial.purchase")}}
			</view>
		</view>
		<u-popup v-model="purchaseshow" :closeable="true" mode="bottom" border-radius="20">
					<view class="purchase">
						
							<view class="popname">
								[NO:{{info.name}}]{{info.finance_name}}
							</view>
							<view class="gline">
								
							</view>
						<view scroll-y="true" >
							<view class="purchaseinfo">
								<view class="case">
									<view class="left">
										{{$t("financial.price")}}
									</view>
									<view class="right">
										{{$currency + info.price}}
									</view>
								</view>
								<view class="case">
									<view class="left">
										{{$t("financial.quantity")}}
									</view>
									<u-number-box v-model="purchaseNumber"  @change="changNum" :max="buyMax" :min="buyMin" :disabled="numberBoxDisable"
									bg-color="#DCDCDCFF" ></u-number-box>
								</view>
								<view class="case">
									<view class="left">
										{{$t("financial.cost")}}
									</view>
									<view class="right">
										{{$currency + info.price*purchaseNumber}}
									</view>
								</view>
								<view class="case">
									<view class="left">
										{{$t("financial.yield")}}
									</view>
									<view class="right">
										{{info.rate}}%
									</view>
								</view>
								<view class="case" v-if="info.ratelist && info.ratelist.length > 0">
									<view class="left">
										{{$t("financial.estimated")}}
									</view>
									<view class="right" style="color: #FC3E32FF">
										{{$currency + (info.price*purchaseNumber*info.rate/100).toFixed(2) + ' ~ ' + (info.price*purchaseNumber*info.ratelist[info.ratelist.length - 1].rate/100).toFixed(2)}}
									</view>
								</view>
								<view class="case">
									<view class="left">
										{{$t("financial.balance")}}
									</view>
									<view class="right">
										{{$currency + userInfo.money}}
									</view>
								</view>
							</view>
							<view class="the">
								{{$t("financial.the")}}
							</view>
							<view class="agreement">
								<u-checkbox 
								v-model="checked" 
								active-color="#2399FD"></u-checkbox>
								<view class="agreementfont">
									<view class="have">
										{{$t("financial.have")}}
									</view>
									<view class="haveRight">
										{{$t("financial.agreement")}}
									</view>
									<view class="have">
										{{$t("financial.and")}}
									</view>
									<view class="rights">
										{{$t("financial.rights")}}
									</view>
								</view>
							</view>
						</view>
						
					</view>
					<view class="buttonPurchase"  @click="onConfirmClick">
						{{$t("financial.purchase")}}
					</view>
		</u-popup>
			
	</view>
</template>

<script>
	import {
		detail,
		addorder,
		faq,
		broadcast
	} from '@/api/finance.js'
	import {
		parseTime,
		countDown
	} from '@/utils/utils'
	import {
		mapGetters
	} from 'vuex' 
	export default {
		data() {
			return {
				list:[
					{
						src:'../../static/image/invite/icon2.png', name:'Use**name', time:'2022-2-2 19:30:10'
					},
					{
						src:'../../static/image/invite/icon2.png', name:'Use**name', time:'2022-2-2 19:30:10'
					},
					{
						src:'../../static/image/invite/icon2.png', name:'Use**name', time:'2022-2-2 19:30:10'
					},
					{
						src:'../../static/image/invite/icon2.png', name:'Use**name', time:'2022-2-2 19:30:10'
					},
				],
				answershow:false,
				purchase: true,
				buyMax:0,
				purchaseNumber:0,
				buyMin:0,
				checked:false,
				condition:2, 
				  // 2 理财详情  1已购买    3未购买    4加仓
				purchaseshow: false,
				id: '',
				info: {},
				monthStr: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'],
				faq: [],
				broadcastList: []
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.load();
			this.loadFaq();
			this.loadBroast();
		},
		filters: {
			timeFormat(val) {
				if (!val) {
					return ''
				}
				console.log(val)
				return parseTime(val)
			},
			monthFormat(val) {
				if (!val) {
					return ''
				}
				const monthStr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
				const time = new Date(val*1000);
				console.log(time);
				return monthStr[time.getMonth()] + ' ' + time.getDate();
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			numberBoxDisable() {
				let disable = true;
				disable = this.buyMax > 0 ? false : true
				disable = this.buyMax < this.buyMin
				return disable
			}
		},
		methods:{
			async loadFaq() {
				let result = await faq();
				for (let i of result) {
					i.show = false;
				}
				this.faq = result;
			},
			async loadBroast() {
				let result = await broadcast();
				this.broadcastList = result;
			},
			async load() {
				let result = await detail({
					id: this.id
				})
				let index = 0;
				for (let j = 0;j < result.ratelist.length; j++) {
					if (Number(result.rate) >= Number(result.ratelist[j].rate)) {
						index = j;
					}
				}
				if (result.ratelist.length == 1) {
					result.ratePercent = 1;
				} else {
					result.ratePercent = index/(result.ratelist.length - 1);
				}
				this.info = result;
				if (result.user_max_buy <= 0) {
					this.buyMax = 0
					this.purchaseNumber = 0
					this.buyMin = 0
				} else {
					this.buyMin = Number(result.user_min_buy);
					let max = Math.floor(Number(this.userInfo.money)/Number(result.price));
					this.purchaseNumber = Math.min(max,Number(result.user_max_buy))
					this.buyMax = Math.min(max,Number(result.user_max_buy))
					if (this.purchaseNumber == 0) {
						this.purchaseNumber = 1;
					}
				}
				if (this.info.status == '0') {
				// 	if (this.info.my_purchase > 0) {
						this.condition = 4;
				// 	} else {
				// 		this.condition = 2;
				// 	}
				} else {
					this.condition = 2;
				}
				// if (this.info.status == '1') {
				// 	if (this.info.my_purchase > 0) {
				// 		this.condition = 1;
				// 	} else {
				// 		this.condition = 3;
				// 	}
				// }
				// if (this.info.status == '2') {
				// 	if (this.info.my_purchase > 0) {
				// 		this.condition = 5;
				// 	} else {
				// 		this.condition = 3;
				// 	}
				// }
			},
			
			changNum(e) {
				if (e.value <= this.buyMax) {
					this.purchaseNumber = e.value
				} else {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: this.$t('common.maxTip'),
					// 	duration: 3000
					// })
				}
			},
			showview(list){
				uni.navigateTo({
					url:'./list?buyerinfo=' + encodeURIComponent(JSON.stringify(list))
				})
			},
			async onConfirmClick() {
				let result = await addorder({
					issue_id: this.info.id,
					num: this.purchaseNumber
				})
				this.navTo('/pages/money/success', {data: JSON.stringify(result)})
			},
			navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
		}
	}
</script>
<style>
</style>
	
<style lang="scss" scoped>
	.main {
		padding-bottom: 200rpx;
		background-color: #FFF!important;
		background-image: url(@/static/image/money/bg1.png) !important;
		background-repeat: no-repeat!important;
		background-size: 750rpx 751rpx!important;
	}
	.top{
		overflow: hidden;
		
		
		.msg{
			width: 690rpx;
			height: 65rpx;
			// background: #FFFFFF;
			background-color: red;
			border-radius: 10rpx;
			margin: 30rpx;
			text-align: center;
			line-height: 65rpx;
			font-size: 24rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #65676B;
			.toast-swiper {
				height: 70rpx;
				line-height: 70rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				font-size:28rpx;
			
				.toast-swiper-item {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80rpx;
			    
					
			
					.toast-swiper-item-main {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 24rpx;
						font-family: Rubik;
						font-weight: 400;
						color: #65676B;
					}
				}
			}
		}
		.name{
			width: 710rpx;
			// background: rgba(255,255,255,0);
			border: 2rpx solid #FFFFFF;
			// opacity: 0.81;
			background-image: url(@/static/image/money/bg4.png) ;
			background-repeat: no-repeat;
			background-size: 710rpx 537rpx;
			
			border-radius: 20rpx;
			padding: 40rpx 30rpx;
			margin: 28rpx auto 41rpx;
			.name-font{
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				line-height: 32rpx;
			}
		}
		
		
		
		.middle{
			display: flex;
			
			.box{
				width: 172rpx;
				text-align: center;
				margin-top: 59rpx;
				.date{
					font-size: 40rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #F14034;
					line-height: 40rpx;
				}
				.due{
					font-size: 32rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #0F0F0E;
					line-height: 32rpx;
				}
				.buy{
					font-size: 32rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #0F0F0E;
					line-height: 32rpx;
				}
				.price{
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #0F0F0E;
					line-height: 32rpx;
				}
				.box-bottom{
					margin-top: 20rpx;
					font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA;
				}
			}
		}
		.box1{
			width: 678rpx;
			padding: 20rpx 0;
			background: #F6F6F6;
			border-radius: 20rpx;
			margin-top: 40rpx;
			margin-left: -16rpx;
			.month{
				display: flex;
				justify-content: space-around;
				.time{
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				}
			}
			.shape{
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				padding-left: 67rpx;
				.cirle{
					width: 20rpx;
					height: 20rpx;
					background: #A8ACC0;
					border-radius: 50%;
				}
				.cirle1{
					width: 20rpx;
					height: 20rpx;
					background: #FC3E32 ;
					border-radius: 50%;
				}
				.shape-line{
					width: 154rpx;
					height: 6rpx;
					background: #A8ACC0;
					
				}
				.shape-line1{
					width: 154rpx;
					height: 6rpx;
					background-color:  #FC3E32;
				}
			}
			.month-details{
				display: flex;
				justify-content: space-around;
				box-sizing:border-box;
				font-size: 24rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #AAAAAA;
				margin-top: 22rpx;
				text-align: center;
				
			}
		}
		.return{
			margin-top: 60rpx;
			display: flex;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			.yuan{
				width: 18rpx;
				height: 18rpx;
				background: #5BC281;
				border-radius: 50%;
			}
			.return-font{
				flex:1;
				margin-top: -6rpx;
				margin-left: 12rpx;
			}
			
		}
		.add{
			margin-top: 40rpx;
			display: flex;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			.yuan1{
				width: 18rpx;
				height: 18rpx;
				background: #5BC281;
				border-radius: 50%;
			
			}
			.add-font{
				
				
			}
		}
		.invite{
			width: 630rpx;
			height: 90rpx;
			background: #FF8E20;
			border-radius: 10rpx;
			margin-top: 25rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
		}
		.date{
			margin-top: 25rpx;
			font-size: 27rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 27rpx;
		}
	}
	.invite1{
		width: 630rpx;
		height: 90rpx;
		background-color: #FFCB98;
		border-radius: 10rpx;
		margin-top: 70rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
	}
	.ended{
		font-size: 27rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 27rpx;
		margin-top: 40rpx;
	}
	
	.buyer{
		padding: 42rpx 50rpx 40rpx 30rpx;
		background-color:#FFFFFF;
		margin-top: 20rpx;
		.buyer-top{
			display: flex;
			align-items: center;
			.buyer-all{
				color: #AAAAAA;
				font-size: 26rpx;
			}
		}
		.buyer-list{
			margin-left: 12rpx;
		}
	}
	
	.list-details{
		.list-user{
			display: flex;
			justify-content: space-between;
			text-align: center;
			align-items: center;
		}
		
	}
	.list-name{
		flex:1;
		text-align: left;
		margin-top: 40rpx;
	}
	.list-time{
		text-align: right;
		margin-top: 40rpx;
	}
	
	.rules{
		margin-top: 20rpx;
		padding: 40rpx 30rpx;
		background-color:#FFFFFF;
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E;
		.rules-top{
			display: flex;
			align-items: center;
		}
	}
	.table-bg{
		margin-top: 42rpx;
		text-align: center;
		background-color: #F4F8FB;
		table{
		    border-top: 1rpx solid #AAAAAAFF;
		    border-left: 1rpx solid #AAAAAAFF;
		    border-collapse: collapse; /*设置单元格的边框合并为1*/
		}
		td{
		    border-bottom: 1rpx solid #AAAAAAFF;
		    border-right: 1rpx solid #AAAAAAFF;
			width: 345rpx;
			height: 70rpx;
			
		}
		.table-title {
			background: #F2FEFC;
		}
		.left , .right{
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 300;
			color: #65676B;
		}
		
	}
	
	.product{
		height: 251rpx;
		margin-top: 20rpx;
		background-color:#FFFFFF;
		padding: 40rpx ;
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E;
		.product-detail{
			display: flex;
			align-items: center;
			
		}
		.product-type{
			display: flex;
			margin-top: 42rpx;
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			.agree{
				margin-right: 38rpx;
				text-align: center;
			}
		}
	}
	
	.faq{
		margin-top: 20rpx;
		background-color:#FFFFFF;
		padding: 42rpx 25rpx 0rpx;
		padding-bottom: 100rpx;
		.faq-top{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			margin-left: 16rpx;
		}
		.question{
			height: 86rpx;
			background: #F0F0F0;
			border-radius: 12rpx 12rpx 0rpx 0rpx;
			background-color: #F0F0F0FF;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			margin: 40rpx 0 6rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
		}
		.answer{
			width: 700rpx;
			
			background: #F0F0F0;
			border-radius: 0rpx 0rpx 12rpx 12rpx;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #65676B;
			padding: 30rpx;
		}
	}
	.four{
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #AAAAAA;
		text-align: center;
	}
	.position{
		width: 690rpx;
		height: 90rpx;
		background: #FF8E20;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}
	.positions{
		width: 690rpx;
		height: 90rpx;
		background-color: #FFCB98;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}
	.purchase{
		padding: 40rpx 40rpx 20rpx;
		.popname{
			font-size: 36rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			line-height: 36rpx;
		}
		.gline{
			width: 670rpx;
			height: 3rpx;
			background: #F6F6F6;
			margin-top: 40rpx;
			
		}
	}
	.purchaseinfo{
		overflow: hidden;
		.case{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 44rpx;
			.left{
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #65676B;
				line-height: 30rpx;
			}
			.right{
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #0F0F0E;
				line-height: 30rpx;
			}
			/deep/.uni-input-input{
				background-color: #DCDCDCFF;
				
				
			}
			/deep/.u-icon-plus{
				margin-left: 4rpx;
				width: 60rpx;
			}
			/deep/.u-icon-minus{
				margin-right: 4rpx;
				width: 60rpx;
			}
			
		}
	}
	.the{
		font-size: 28rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E;
		margin-top: 49rpx;
	}
	
	.agreement{
		display: flex;
		margin-top: 61rpx;
		.agreementfont{
			margin-left: 20rpx;
			display: flex;
			flex-wrap: wrap;
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			.have{
				color: #AAAAAA;
			}
			.haveRight{
				margin-left: 10rpx;
				margin-right: 10rpx;
				font-family: Rubik-Regular;
				color: #FC3E32FF;
			}
			.rights{
				font-family: Rubik-Regular;
				color: #FC3E32FF;
			}
			
		}
	}
	.buttonPurchase{
		width: 750rpx;
		height: 110rpx;
		background: #FF8E20;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 110rpx;
		text-align: center;
	}
	.btn-box {
		width: 100%;
		padding: 30rpx 0;
		position: fixed;
		bottom: 0;
		background: #FFF;
		box-shadow:0rpx -6rpx 16rpx 4rpx rgba(236,236,236,0.8);
	}
	.line-box{
		width: 650rpx;
		background: #FFFFFF;
		border: 2rpx solid #E2E5EA;
		border-radius: 10rpx;
		padding: 30rpx 30rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E;
		margin-top: 38rpx;
		.box-font{
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
		}
		.box-line{
			width: 590rpx;
			height: 2rpx;
			background: #E2E5EA;
			margin: 30rpx 0;
			
		}
		.shape-grey{
			position: relative;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			width: 445rpx;
			background: linear-gradient(to left,transparent 0%,transparent 30%,#d0d2dd 30%,#d0d2dd 100%);background-size: 13rpx 4rpx;background-repeat: repeat-x;background-position-y: center;
		}
		.shape-green{
			z-index: 0;
			position: absolute;
			top: 58rpx;
			height: 4rpx;
			background: linear-gradient(to left,transparent 0%,transparent 30%,#5BC281 30%,#5BC281 100%);background-size: 13rpx 4rpx;background-repeat: repeat-x;
		}

		.cirle{
			width: 22rpx;
			height: 22rpx;
			background: #d0d2dd;
			border-radius: 50%;
		}
		.cirle1{
			width: 22rpx;
			height: 22rpx;
			background: #5BC281 ;
			border-radius: 50%;
		}
		
		.buy{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			line-height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.buy-font{
				width: 68rpx;
			}
			.buy-number{
				margin-left: -12rpx;
				font-size: 26rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #A8ACC0;
				line-height: 26rpx;
			}
			.buy-number1{
				margin-left: -12rpx;
				font-size: 26rpx;
				font-family: Rubik;
				font-weight: 400;
				color:#5BC281;
				line-height: 26rpx;
			}
		}
	}
	.align-center-vertical{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	}
</style>
